<template>
  <div id="header">
    <div class="content header">
      <div>欢迎光临 孔丘旅游网站</div>
      <div v-if="isLogin == 0">
        <el-button type="primary" round @click="togo('/login')">登录</el-button>
        <el-button type="success" round @click="togo('/login')">注册</el-button>
      </div>
      <div v-else>
        <el-button type="success" round @click="logout">退出登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, computed } from "vue";

const router = useRouter();
const togo = (path) => {
  router.push(path);
};

const isLogin = computed(() => {
  return localStorage.isLogin || 0;
});

const logout = () => {
  localStorage.setItem("isLogin", 0);
  togo("/login");
};
</script>

<style lang="scss" scoped>
#header {
  width: 100%;
  height: 40px;
  background-color: #f2f2f2;
  .header {
    height: 100%;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
